<template>
    <div>
        <div class="container">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                   <i class="el-icon-s-platform"></i> 详情
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <hr>
        <h3 class="mt">详情</h3>
            <table border cellspacing="0">
                <tr v-for="el in arr1">
                    <td class="pd tc bg">{{ el.list }}</td>
                    <td class="pd tc wd2">{{ el.cont }}</td>
                </tr>
                <tr style="height: 200px;">
                    <td class="bg tc">图片:</td>
                    <td>
                        <el-image
                        class="ml50"
                        style="width: 100px; height: 100px"
                        :src="url"
                        fit="contain"></el-image>
                        <el-image
                        class="ml50"
                        style="width: 100px; height: 100px"
                        :src="url"
                        fit="contain"></el-image>                  
                    </td>
                </tr>
            </table>
            <h3>审核记录</h3>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="date" label="审核时间" align="center"></el-table-column>
                <el-table-column prop="id" label="审核结果" align="center"></el-table-column>
                <el-table-column class="height" prop="name" label="审核说明" align="center"></el-table-column>
                <el-table-column prop="address" label="审核人" align="center"></el-table-column>
            </el-table>
            <h3>审核操作</h3>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="ml50" @click="onBack">取消</el-button>
                    <el-button class="ml50" type="primary" @click="onSubmit">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            form: {
                resource: '',
                desc: ''
            },
            arr1:[
                    {list:'标题:',cont:'活动开始了'},
                    {list:'发布人:',cont:'张哲'},
                    {list:'发布时间:',cont:'2022-10-10'},
                    {list:'内容:',cont:'主要经营汽车维修、保养、美容'},
                ],
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        };
    },
    created() {
        this.getData();
    },
    methods: {
        // 获取 easy-mock 的模拟数据
        getData() {
            fetchData(this.query).then(res => {
                console.log(res);
                this.tableData = res.list;
                this.pageTotal = res.pageTotal || 50;
            });
        },
        //提交
        onSubmit() {
            console.log('submit!');
        },
        //取消
        onBack(){
            console.log(1);
            this.$router.back();
        }
    }
};
</script>

<style scoped>
h3{
    margin: 10px 0px;
}
table{
    width: 80%;
    border-color: rgb(251, 251, 251);
}
>>>.el-textarea__inner{
    width: 500px;
}
.mt{
    margin-top: 50px;
}
.mg{
    margin: 0 20px;
}
.ml50{
    margin-left: 100px;
}
.wd{
    width: 300px;
}
.wd2{
    width: 800px;
}
.tc{
    text-align: center;
}
.pd{
    padding: 20px 30px;
    flex-grow: 1;
}
.bg{
    background-color: rgb(239,239,239);
}
</style>
